<template>
    <div>
        <el-form :model="form" :rules="rules" label-position="right" ref="form" label-width="160px">
			
            <el-form-item label="选择栏目：" prop="ca_ccid">
                <el-col :span="8">
                    <el-cascader
                            placeholder="选择所属栏目"
                            v-model="ccid"
                            :options="documentData"
                            :props="props">
                    </el-cascader>
                </el-col>
            </el-form-item>

		   <el-form-item label="文档标题：" prop="ca_title">
			   <el-col :span="8">
				   <el-input v-model="form.ca_title" placeholder="请输入文档标题"></el-input>
			   </el-col>
		   </el-form-item>

           <el-form-item label="文档标题图片：" prop="ca_th_image">
			   <el-col :span="8">
				   <upload-image :preview="form.ca_th_image" v-on:cropperImage="cropperImageClick" v-on:uploadImageChange="uploadImageChange"></upload-image>
				   
				   <el-button @click="imgBoxBtn(form)" style="margin-top: 10px;">从图库选择</el-button>
			   </el-col>
		   </el-form-item>

           
           <el-form-item label="短标题：" prop="ca_short_title">
			   <el-col :span="8">
				   <el-input v-model="form.ca_short_title" placeholder="请输入短标题"></el-input>
			   </el-col>
		   </el-form-item>

           <el-form-item label="文档内容：" prop="ca_content">
                <el-col :span="24">
                    <div id="editorElement" style="text-align:left"></div>
                </el-col>
            </el-form-item>

           <el-form-item label="标签：" prop="ca_tags">
			   <el-col :span="8">
				   <el-input v-model="form.ca_tags" placeholder="请输入标签，多个以,分割"></el-input>
			   </el-col>
		   </el-form-item>
		   
		   <el-form-item label="排序：" prop="ca_order">
			   <el-col :span="8">
				   <el-input v-model="form.ca_order" placeholder="请输入排列数序，数字越高越靠前"></el-input>
			   </el-col>
		   </el-form-item>

           <el-form-item label="来源：" prop="ca_source">
			   <el-col :span="8">
				   <el-input v-model="form.ca_source" placeholder="请输入来源"></el-input>
			   </el-col>
		   </el-form-item>

           <el-form-item label="作者：" prop="ca_author">
			   <el-col :span="8">
				   <el-input v-model="form.ca_author" placeholder="请输入作者"></el-input>
			   </el-col>
		   </el-form-item>

           <el-form-item label="搜索关键字：" prop="ca_keywords">
			   <el-col :span="8">
				   <el-input v-model="form.ca_keywords" placeholder="请输入搜索关键字"></el-input>
			   </el-col>
		   </el-form-item>

           <el-form-item label="摘要：" prop="ca_abstract">
			   <el-col :span="8">
				   <el-input v-model="form.ca_abstract" placeholder="请输入摘要"></el-input>
			   </el-col>
		   </el-form-item>

           <el-form-item label="浏览次数：" prop="ca_browse_num">
			   <el-col :span="8">
				   <el-input v-model="form.ca_browse_num" placeholder="请输入浏览次数"></el-input>
			   </el-col>
		   </el-form-item>

           <el-form-item label="是否允许评论：" prop="ca_is_comment">
			   <el-col :span="15">
				   <el-radio v-model="form.ca_is_comment" label="0" >否</el-radio>
				   <el-radio v-model="form.ca_is_comment" label="1" >是</el-radio>
			   </el-col>
		   </el-form-item>

           <el-form-item label="是否审核通过：" prop="ca_is_audit">
			   <el-col :span="15">
				   <el-radio v-model="form.ca_is_audit" label="0" >否</el-radio>
				   <el-radio v-model="form.ca_is_audit" label="1" >是</el-radio>
			   </el-col>
		   </el-form-item>

			<el-col :span="24" v-if="customModelData.length > 0">
				<div class="customFieldInput">
					自定义模型设置（该部分为自定义模型部分，如果没有自定义模型，则不会显示）
				</div>
			</el-col>
			<el-form-item :label="'自定义模型 ' + (index+1) + ' :'" v-for="item,index in customModelData">
				<el-col :span="8">
					<el-input type="textarea" rows="4" v-model="form[item.COLUMN_NAME]"
							  :placeholder="item.COLUMN_COMMENT + '，数据类型：' + (item.DATA_TYPE == 'varchar' ? '文本' : '数字')"></el-input>
					<span class="fieldCommentHint">{{item.COLUMN_COMMENT}}</span>
				</el-col>
			</el-form-item>

			<el-form-item>
				<el-button type="primary" @click="submitForm('form')">提交</el-button>
				<el-button @click="resetForm">重置</el-button>
			</el-form-item>
		   
		</el-form>
    </div>
</template>

<script>
    import E from 'wangeditor'
    import { mapState,mapMutations } from 'vuex'
    export default {
        //数据源
        data(){
            return {
                rules : {
				   ca_title : [
					   { required: true, message: '请输入标题名称', trigger: 'blur' }
				   ]
                },
                ccid : 0  //所属栏目ID
            }
        },
        //初始化函数
        mounted() {

            //获取基本数据
            // this.initData();

            //初始化富文本
            this.initEditor();

            //获取文档信息
            this.getDocumentData();

			//获取自定义模型
			this.getCustomField();

        },
        //计算属性
        computed: {
            ...mapState({
                form : state => state.EditDocumentModule.form,
				documentData : state => state.EditDocumentModule.documentData,
				customModelData : state => state.EditDocumentModule.customModelData
             })
        },
        //组件方法
        methods: {
			getCustomField(){
				var params = {
					// appKey 	  : this.$localData.getEasydCloudAppKey(),
					appKey 	  : 'easyd_cms',
					tableName : "easyd_cms_article"
				}
				this.$myLoading.startLoading()
				this.$http.postHttp(
						this.$API.modelManagerGetCustomModel,
						params,
						rs => {
							this.$store.commit('EditDocumentModule/updateCustomModelData',rs)
							this.$myLoading.endLoading()
						}
				)
			},
            cropperImageClick() {
				var that = this;
				this.$cropperImage({
					//裁切完成后回调函数
					cropperImageResult(file) {
                        that.$myLoading.startLoading()
						that.$http.Aliyun_uploadImageHttp(file, rsUrl => {
                            that.$myLoading.endLoading()
							that.form.ca_th_image = rsUrl;
						})
					},
					//要裁切的图片
					imgUrl: this.form.ca_th_image
				});
			},
			uploadImageChange(e){
                this.$myLoading.startLoading()
				var fileObj = e.target.files[0];
				this.$http.Aliyun_uploadImageHttp(fileObj,rsUrl => {
                    this.$myLoading.endLoading()
					this.form.ca_th_image = rsUrl
				});
			},
            initEditor(){

                //富文本初始化
                this.editor = new E("#editorElement")

                //获取富文本输入框内容
                this.editor.customConfig.onchange = (html) => {
                    this.form.ca_content = html
                }

                //如果使用富文本图片上传按钮的监听回调
                this.editor.customConfig.customUploadImg = (files, insert) => {

                    //阿里云OSS文件服务
                    var fileObj = files[0]
                    this.$myLoading.startLoading()
                    this.$http.Aliyun_uploadImageHttp(fileObj ,rs => {
                        this.$myLoading.endLoading()
                        this.form.ca_content = this.form.ca_content + '<div><img src="' + rs + '" /></div>'
                        this.editor.txt.html(this.form.ca_content)
                    })

                }

                //使用富文本
                this.editor.create()

            },
            submitForm(form){
				
				this.$refs[form].validate((valid) => {

					if (valid) {

                        //获取所属栏目ID
                        var columnId =  this.ccid.length > 0 ? this.ccid[this.ccid.length - 1] : this.ccid[0]

                        //获取所属栏目
                        this.form.ca_ccid = columnId

                        //添加栏目完整路径
                        this.form.ca_ccid_path = JSON.stringify(this.ccid);

                        //添加更新所需条件
                        this.form.update_where = "ca_id";

						this.$myLoading.startLoading()
						this.$http.postHttp(
							this.$API.cmsArticleUpdate,
							this.form,
							rs => {
								this.$myLoading.endLoading()
                                this.$myPop.SuccessMessage()
							}
						)

					}

				})
				
			},
            getDocumentData(){

                this.$myLoading.startLoading()
                this.$http.getHttp(
                    this.$API.cmsColumnSearch + "/skip/0/limit/999/cc_is_delete/0",
                    rs => {
                        this.$store.commit('EditDocumentModule/updateDocumentData',this.$common.arrayColumnMenu(rs.data))
                        this.initData();
                    }
                )
            },
            initData(){
                this.$http.getHttp(
                    this.$API.cmsArticleSearch + "/ca_id/" + this.$route.query.ca_id,
                    rs => {
                        this.$store.commit('EditDocumentModule/updateForm',rs.data[0])
                        this.editor.txt.html(rs.data[0].ca_content)
                        this.ccid = JSON.parse(rs.data[0].ca_ccid_path)
                        this.$myLoading.endLoading()
                    }
                )
            },
            imgBoxBtn(items) {
                var that = this
                //回调函数
                this.$selectImageBox({
                    selectImageValue(item){
                    	console.log('------回调！？？！？！')
                    	console.log(item)
                    	items.ca_th_image = item;
                    }
                })
            },
        }
    }
</script>

<style lang="stylus" scoped>
@import '~PUBLIC_CSS';
.customFieldInput {
	width 100%
	height 40px
	background #eee
	margin-bottom 30px
	padding-left 20px
	box-sizing border-box
}

.fieldCommentHint {
	color red
}
</style>